<!DOCTYPE html>
<html>
<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="utf-8">
    <title>字典列表</title>
    <script src="static/js/vue.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <!-- 引入 css -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <style>
        header {
            /* background-color: #333; */
            background: #1d213d;
            color: #fff;
            padding: 10px;
            text-align: center;
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
        }

        header img{
            height: 100%; /* 图片高度与header高度相同 */
            width: 400px;
            padding: 0 10px; /* 可以根据需要调整图片与标题之间的间距 */
        }
        header h1 {
            flex: 0.63; /* 让标题占据剩余的空间，实现标题居中 */
            text-align: center; /* 水平居中 */
            color: #fff; /* 设置标题颜色为白色 */
            margin: 0; /* 去掉默认的margin */
        }

        #title{
            display: block;
            font-size: 2.1em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #resourcetitle{
            width: 50%;
            height: 35px;
        }
        .bodydiv{
            padding-top: 130px;
            height: 100%;
            max-height: 1200px;
        }




        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #e6e6e6;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        #seachbtn{
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 15px;
            cursor: pointer;
            margin-left:10px;
            width: 5%;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;margin: 0px;overflow: hidden">
<div style="width: 100%;">
    <div style="position: fixed;width: 100%;">
        <header>
            <img src="static/images/logo.png" id="logo" style="float: left;" alt="梦寒君资源">
            <h1 id="title">字典列表</h1>
        </header>
    </div>
</div>
<div class="bodydiv">
    <div id="app" >
        <div class="pagination">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="标题">
                    <el-input v-model="formInline.title" placeholder="标题模糊查询"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="formInline.type" placeholder="类型">
                        <el-option label="导航栏" value="N" selected></el-option>
                        <el-option label="资源类型下拉项" value="T"></el-option>
                        <el-option label="搜索下拉项" value="L"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBars">查询</el-button>
                    <el-button type="primary" @click="openAdd">增加字典</el-button>
                </el-form-item>
            </el-form>

        </div>

        <div style="width: 100%;height: 500px;overflow: auto;">
            <el-table
                    height="500"
                    :data="tableData"
                    border
                    style="width: 100%">

                <el-table-column
                        prop="title"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        fixed
                        prop="title"
                        label="标题"
                >
                </el-table-column>

                <el-table-column
                        prop="value"
                        label="字典值"
                >
                </el-table-column>
                <el-table-column
                        prop="level"
                        label="url"
                >
                </el-table-column>
                <el-table-column
                        prop="typeName"
                        label="类型"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.childrenFlag=='Y'"  @click="ViewChildren(scope.row.id,scope.row.title)" type="text" size="small">查看子字典</el-button>
                        <el-button v-if="scope.row.childrenFlag=='N'"  @click="addChildren(scope.row.id)" type="text" size="small">增加子字典</el-button>
                        <el-button  @click="Viewdetails(scope.row.resourceId)" type="text" size="small">查看</el-button>
                        <el-button  @click="edit(scope.row.resourceId)" type="text" size="small" >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>



        <el-dialog :title="tableTitle" :visible.sync="dialogTableVisible">
            <el-table :data="childrenList">
                <el-table-column
                        prop="title"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        fixed
                        prop="title"
                        label="标题"
                >
                </el-table-column>

                <el-table-column
                        prop="value"
                        label="字典值"
                >
                </el-table-column>
                <el-table-column
                        prop="level"
                        label="url"
                >
                </el-table-column>
                <el-table-column
                        prop="typeName"
                        label="类型"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button  @click="Viewdetails(scope.row.resourceId)" type="text" size="small">查看</el-button>
                        <el-button  @click="edit(scope.row.resourceId)" type="text" size="small" >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>



        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="字典标题" label-width="120px">
                    <el-input style="width: 350px" v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="字典值" label-width="120px">
                    <el-input style="width: 350px" v-model="form.value" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="url" label-width="120px">
                    <el-input style="width: 350px" v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="字典类型" label-width="120px" >
                    <el-select v-model="form.type" placeholder="字典类型" @change="initParent">
                        <el-option label="导航栏" value="N" selected></el-option>
                        <el-option label="资源类型下拉项" value="T"></el-option>
                        <el-option label="搜索下拉项" value="L"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父级字典" label-width="120px">
                    <el-select v-model="form.pid" placeholder="字典类型">
                        <el-option v-for="item in parentList" :label="item.title" :value="item.id" ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>


    </div>




</div>
</body>
<script>
    var token = localStorage.getItem("token");


    new Vue({
        el:'#app',
        data:{
            tableData:[],
            formInline: {
                title: '',
                type: 'N'
            },
            typeList:[],
            gotoUrl:'',
            tableTitle:'',
            dialogTableVisible: false,
            dialogFormVisible: false,
            childrenList:[],//子字典数据
            form:{
                title: null,
                value:null,
                pid:null,
                type:null,
                url:null
            },
            formTitle:'新增字典',
            parentList:[]
        },
        methods:{
            /**
             * 跳转
             */
            goto(){
                window.open(this.gotoUrl);
            },
            openAdd(){
              this.d
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.searchResource();
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            /**
             * 初始化父级字典
             */
            initParent(){
                axios.get('bar/admin/getBarList?type='+this.form.type,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.parentList = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            searchBars(){
                axios.get('bar/admin/getBarList?title='+this.formInline.title+'&type='+this.formInline.type,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.tableData = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            searchChildrens(pid){
                axios.get('bar/admin/getBarList?pid='+pid+'&type='+this.formInline.type,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.childrenList = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            Viewdetails(resid){
                window.open("/resourcesharing/goto/resourcedetails?resid="+resid)
            },
            /**
             * 查看子字典
             * @constructor
             */
            ViewChildren(id,title){
                this.tableTitle = title;
                this.searchChildrens(id);
                this.dialogTableVisible = true;
            },
            /**
             * 增加子字典
             * @param id
             */
            addChildren(id){
                this.formTitle = '新增字典';
                this.dialogFormVisible = true;
            },
            edit(resid){
                window.open("/resourcesharing/goto/admin/editresource?resid="+resid)
            }
        },
        created() {
            this.searchBars();
        }
    })
</script>

</html>